<template>
    <div class="left-sidebar">
        <div class="slimScrollDiv">
            <div class="scroll-sidebar">
                <div class="navbar-header">
                    <a href="#"><img src="~assets/images/logo.png"></a>
                </div>
                <div class="user-profile">
                    <div class="profile-img">
                        <img src="~assets/images/icon-touxiang.png">
                    </div>
                    <div class="profile-text">
                        <h5>{{userinfo.Name}}</h5>
                        <a href="javascript:void(0)" @click="logout()">退出</a>
                    </div>
                </div>
                <div class="sidebar-nav">
                    <ul class="nav flex-column">
                        <li class="nav-devider"></li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#"><i class="fa fa-cog" aria-hidden="true"></i>个人设置</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-commenting" aria-hidden="true"></i>我的消息</a>
                        </li>
                        <li class="nav-devider"></li>
                        <li>
                            <div class="nav-date">
                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                            <span>00'00'00</span>
                            </div>
                        </li>
                        <li class="nav-devider"></li>
                        <li class="nav-btn-block">
                            <button type="button" class="btn btn-outline-danger btn-block"><i class="fa fa-heart"></i>暂停</button>
                        </li>
                        <li class="nav-btn-block">
                            <button type="button" class="btn btn-outline-danger btn-block"><i class="fa fa-heart"></i>答题卡</button>
                        </li>
                        <li class="nav-btn-block">
                            <button type="button" class="btn btn-outline-danger btn-block"><i class="fa fa-heart"></i>交卷</button>
                        </li>
                        <li class="nav-btn-block">
                            <button type="button" class="btn btn-outline-danger btn-block"><i class="fa fa-heart"></i>留到下次</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data : function(){
            return {
                userinfo : {Name:''}
            }
        },
        created : function () {
            if(localStorage.getItem("userinfo") != null) {
                this.userinfo = JSON.parse(localStorage.getItem("userinfo"))
                console.log(this.userinfo)
            }
        },
        methods : {
            logout : function(d){
                var self = this
                this.$confirm("确定登出系统吗").then(function(){
                    localStorage.removeItem('ms_username')
                    localStorage.removeItem('access_token')
                    localStorage.removeItem("userinfo")
                    self.$router.push('/');
                }).then(function(){

                })

            }
        }
    }
</script>
